<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-0">
        <view class="section-body">
          <view class="list">
            <view
              class="listItme"
              v-for="item in list"
              :key="item.name"
              @click="jump(item.id)"
            >
              <view class="listItmes">
                <image :src="item.img" mode="" class="image"></image>
                <view class="listItmess">
                  <view class="listItmestop">
                    {{ item.name }}
                  </view>
                  <view class="listItmesbuttom">
                    下批次开始时间:
                    <view>{{ item.start_time.substring(0, 10) }}</view>
                  </view>
                </view>
                <image
                  src="../../../../static/guo.png"
                  mode=""
                  class="images"
                />
              </view>
            </view>
          </view>
          <view class="preservation">
            <view class="form">
              <view class="form-item">
                <view class="label">合同名称</view>
                <view class="shape"></view>
                <view class="input">
                  <u--input
                    placeholderClass="input-placeholder"
                    class="input-body"
                    placeholder="合同名称"
                    v-model="form.contract_name"
                  ></u--input>
                </view>
              </view>
              <view class="actions">
                <view class="action" @click="handleResetForm()">
                  <text>重</text>
                  <text>置</text>
                </view>
                <view class="action search" @click="handleSearch()">
                  <text>查</text>
                  <text>询</text>
                </view>
              </view>
            </view>
            <view class="wrapper" v-for="(item, index) in paylist" :key="index">
              <view class="index">序号：{{ index + 1 }}</view>
              <view class="contract">合同：{{ item.contract_name }}</view>
              <view class="partner">合同乙方：{{ item.partner }}</view>
            </view>
            <view class="problem-wrapper" v-show="paylist.length < 1">
              <image
                src="https://www.mescroll.com/img/mescroll-empty.png"
              ></image>
              <view class="">~ 空空如也 ~</view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { procurement } from "@/api/procurement.js";
import { contractList } from "@/api/project.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      //定义不同卡片的照片
      list: [
        {
          img: "../../../../static/sheng.png",
        },
        {
          img: "../../../../static/sheng2.png",
        },
        {
          img: "../../../../static/sheng2.png",
        },
        {
          img: "../../../../static/shi.png",
        },
      ],
      form: {
        contract_name: "",
      },
      paylist: [],
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
    };
  },
  onLoad() {
    this.procurement();
  },

  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  onShow() {
    this.upCallback();
  },
  methods: {
    async procurement() {
      //开启loading状态
      uni.showLoading({
        title: "加载中...",
      });
      const { data } = await procurement();
      //数据未返回照片跟本地的照片数据进行拼接
      for (let i = 0; i < this.list.length; i++) {
        for (let j = i; j < data.data.data.length; j++) {
          data.data.data[i].img = this.list[i].img;
        }
      }
      this.list = data.data.data;
      //请求完成关闭loading状态
      uni.hideLoading();
    },

    jump(id) {
      //点击跳转详情
      uni.navigateTo({
        url:
          "/pages/work/manager/procurement/Materialdetails?params= " +
          JSON.stringify(id),
      });
    },
    /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    //新增按钮事件
    onNavigationBarButtonTap() {
      uni.navigateTo({
        url: "/pages/work/manager/construction/manufacturing/capital/add",
      });
    },

    async upCallback() {
      const { data } = await contractList({
        project_id: this.curProject.id,
        contract_name: this.form.contract_name,
      });
      console.log(data);
      if (data.code == 1) {
        this.paylist = data.data.data;
        console.log(this.list);
      }
      this.mescroll.endErr();
    },

    handleResetForm() {
      this.form.contract_name=""
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    handleSearch() {
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
.section-0 {
  width: 100%;
  background: #2e5efe;

  .section-body {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-right: 48rpx;
      margin-top: 22rpx;

      .listItme {
        flex: 25%;
        background-color: #0837b7;
        height: 119rpx;
        border-radius: 15rpx;
        padding: 15rpx;
        margin-bottom: 15rpx;
        margin-top: 10rpx;
        margin-left: 48rpx;

        .listItmes {
          display: flex;
          margin-top: 6rpx;
          justify-content: space-between;

          .listItmess {
            width: 80%;
            margin-left: 10rpx;
            color: #fff;
            font-size: 20rpx;

            .listItmestop {
              margin-bottom: 20rpx;
              font-weight: 700;
              margin-left: 15.3rpx;
            }
            .listItmesbuttom {
              // margin-left: 15.3rpx;
              font-size: 23rpx;
            }
          }

          .image {
            width: 76rpx;
            height: 76rpx;
            margin-top: 14rpx;
          }

          .images {
            width: 15rpx;
            height: 30rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
    .preservation {
      width: 100%;
      margin-top: 36rpx;
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);
      padding-bottom: 38rpx;
      .form {
        width: 100%;
        padding: 0 75rpx;
        padding-top: 40rpx;
        box-sizing: border-box;

        .actions {
          width: 100%;
          height: 50rpx;
          margin-top: 29rpx;
          padding-bottom: 40rpx;
          display: flex;
          justify-content: space-between;
          .action {
            width: 288rpx;
            height: 48rpx;
            background-color: #395cf5;
            border-radius: 20rpx;
            text-align: center;
            line-height: 48rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            color: #ffffff;
            text {
              &:first-child {
                margin-right: 20rpx;
              }
            }
          }
          .search {
            background-color: #1534ce;
          }
        }
        .form-item {
          width: 600rpx;
          height: 48rpx;
          border-radius: 20rpx;
          border: solid 2rpx #1534ce;
          margin: 0 auto;
          margin-bottom: 25rpx;
          &:last-child {
            margin-bottom: 34rpx;
          }
          @include clear();
          .label {
            float: left;
            width: 134rpx;
            height: 48rpx;
            text-align: center;
            line-height: 44rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #1534ce;
          }
          .shape {
            width: 3rpx;
            height: 32rpx;
            background-color: #7f98ae;
            float: left;
            margin-top: 8rpx;
          }
          .input {
            float: left;
            width: calc(100% - 134rpx - 3rpx);
            .input-body {
              box-sizing: border-box;
              width: 100%;
              height: 44rpx;
              padding: 0 !important;
              border: none;
              padding-left: 30rpx !important;
              padding-right: 30rpx !important;
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: rgba(0, 0, 0, 0.7);
            }
            .input-placeholder {
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }
      .wrapper {
        width: 91%;
        margin: auto;
        border-radius: 35rpx;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
        padding: 28rpx 40rpx;
        padding-top: 15rpx;
        margin-bottom: 40rpx;
        font-size: 27rpx;

        .index {
          font-weight: 700;
        }
        .contract {
          margin-top: 9.6rpx;
        }
        .partner {
          margin-top: 9.6rpx;
        }
      }
    }
  }
}
.problem-wrapper {
  color: #808080;
  margin: 0 auto;
  text-align: center;
  image {
    margin-top: 300rpx;
    width: 200rpx;
    height: 200rpx;
  }
}
</style>
